<template>
	<view style="background-color: #FFFFFF;min-height: 100vh;">
<!-- 		<view class="top" style="padding-top: 20px;">
			<view class="topimg">
				<view class="imgtop2">
					<image src="/static/goback.png" mode="" style="margin-right: 20px;width: 25px;height: 25px;" @click="goback"></image>
					<image src="/static/img/xiangji.png" mode="" style="width: 20px;height: 20px;" @click="gofabu"></image>
				</view>

			</view>
		</view> -->
		<view v-if="faxian.length==0" style="text-align: center;color: #CCCCCC;">
			用户未发布内容.......
		</view>
		<!-- 我得页面开始 -->
		<view class="" v-for="(item,index) in faxian" style="border-bottom: 0.5px solid #FAFAFA;">
			<!-- 列表渲染 -->
			<view class="quan" style="position: relative;">
				<view class="" style="position: absolute;right: 30px;top: 5px;" @click="deleteitem(item)">
					<image src="/static/img/shanchu.png" mode="" style="width: 20px;height: 20px;"></image>
				</view>
				<view class="wrap" @tap="myinfo(item)">
					<image :src="item.avatar" mode=""></image>

				</view>
				<view class="rightwrap">
					<text style="font-size: 15px;color: #000000;">{{item.nickname}}</text>
					<view class="" style="color: rgba(16, 16, 16, 1);
								font-size: 14px;
								text-align: left;
								font-family: PingFangSC-regular;margin-top: 5px;">
						{{item.content}}
					</view>
					<!-- yizhang  -->
					<view class="imgwrapone" style="text-align: left;" v-show="item.newimg.length == 1">
						<image :src="item.img" style="width: 130px;margin-left: 5px;height: 205px;" v-show="item.img != ''"></image>
					</view>

					<!-- sanzhang  -->
					<view class="imgwrap" style="" v-show="item.newimg.length>1">
						<view v-for="(imgitem,index) in item.newimg">
							<image :src="imgitem" style="width: 100px;height: 105px;"></image>
						</view>
					</view>

					<view class="videos" style="text-align: left;" v-show="item.vedio != ''">
						<!-- 视频 -->
						<video :src="item.vedio" controls="controls" x5-playsinline="" playsinline="true" webkit-playsinline="true"
						 x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="" x5-video-orientation="portraint"
						 style="width: 200px;margin-top: 10px;margin-left: 5px;
						height: 105px;"></video>
					</view>
				</view>
			</view>
			<view class="bottominfo">
				<text style="color: rgba(16, 16, 16, 1);
					font-size: 12px;
					text-align: left;
					font-family: PingFangSC-regular;">{{item.add_time}}</text>
				<view class="twoflex">
					<view class="twodisplay">
						<view class="thispinglun" @click="openxiaoxi(item.dy_id)">
							<image src="/static/img/pinglun.png" mode="" style="width: 20px;height: 20px;margin-right: 2px;"></image>
							<text style="font-size: 10px;font-family: PingFangSC-regular;margin-right: 20px;">{{item.pl_num}}</text>
						</view>
						<view class="" style="width: 35px;display: flex;align-items: center;" @click="dz(item.dy_id)">
							<image src="/static/love.png" v-if="item.is_dz == 1" mode="" style="width: 20px;height: 20px;margin-right: 2px;"></image>
							<image src="/static/img/zan.png" v-else mode="" style="width: 20px;height: 20px;margin-right: 2px;"></image>
							<text style="
									font-size: 10px;
									font-family: PingFangSC-regular;">{{item.zan_num}}</text>
						</view>

					</view>
				</view>
			</view>
		</view>
		<wyb-popup ref="wf_status3" type="bottom" width="500" radius="6">
			<!-- 底部弹出消息 -->
			<view class="mask">
				<view class="title">
					<view>{{number}}条评论</view>
					<image src="/static/gb.png" @tap="guanbi"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 75% !important;">

					<view v-for="(item,index) in info" @click="topl(item.id,item.uid,item.nickname)" style="margin-bottom: 10px;">
						<!-- 评论 -->
						<view style="margin: 10upx 0; display: flex;align-items: center;justify-content: space-between;">
							<!-- 信息 -->
							<view class="thisOne">
								<image class="useravatar" :src="item.avatar"></image>
								<view>
									<view class="username">{{item.nickname}}</view>
									<view class="pinglun">{{item.title}}</view>
								</view>
							</view>
						</view>
						<view style="width: 40%; text-align: right;padding-left: 80rpx;"  v-show="item.phlist != ''">
							<view v-if="listshow" style="font-size: 15px;display: flex;align-items: center;" @tap="containerTap">收起评论<image
								 src="/static/sanjiaojiantou.png" mode="widthFix" style="width: 15px;height: 15px;transform: rotate(180deg);"></image>
							</view>
							<view v-else style="font-size: 15px;display: flex;align-items: center;" @tap="zhankai">展开{{item.phlist.length}}条评论<image
								 src="/static/sanjiaojiantou.png" mode="widthFix" style="width: 15px;height: 15px;"></image>
							</view>
						</view>
						<view class="" v-for="(items,index) in item.phlist" :key='index'>

							<view style="display: flex;flex-direction: column;align-items: flex-end;" v-if="listshow">
								<view class="pinglunbox">
									<view class="thisOne">
										<image class="useravatar2" :src="items.avatar"></image>
										<view>
											<view class="username">{{items.nickname}}</view>
											<view class="pinglun">{{items.hf_title}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>


				</scroll-view>

				<view style="display: flex;align-items: center;justify-content: space-between;position: absolute;bottom: 30px;"
				 v-show="plid != ''">
					<!-- 信息 -->
					<view style="">
						<input v-model="title" type="text" :placeholder="placeholder" style="height: 30px;border: 1px solid #CCCCCC;width:250px;border-radius: 40px;padding-left: 10px;">
					</view>
					<!-- 赞 -->
					<view class="zan">
						<button type="default" style="height: 32px;width: 80px;background-color: #FFFFFF;margin-left: 10px;font-size: 14px;line-height: 30px;"
						 @click="toadd">确定</button>
					</view>
				</view>
			</view>
		</wyb-popup>




	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import Lee from '@/components/lee/lee-popup.vue'
	import LeePopup from '@/components/lee-popup/lee-popup.vue'
	export default {
		components: {
			LeePopup,
			Lee,
			wybPopup
		},
		data() {
			return {
				placeholder: '评论...',
				dy_id: '',
				isshow: false,
				zhanshi: true,
				userinfo: {
					nickname: '',
					synopsis: '',
					img: "",
					phone: '',
					bhf_uid: ''
				},
				faxian: [],
				clicklove: false,
				love: {
					num: 1,
					"morenimg": "/static/img/dianzan.png",
					"img": "/static/love.png"
				},
				listshow: true,
				istan: false,
				info: '',
				plid: '',
				title: '',
				hidd: false
			}
		},
		computed: {
			number() {
				return this.info.length
			}
		},
		onLoad() {
			let _this = this
			let token = uni.getStorageSync("token")
			uni.request({
				url: this.G_base + '/api/userinfo',
				method: "GET",
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + token
				},
				success: (res) => {
					// console.log(res);
					// console.log(res.data.data.data.avatar)
					_this.userinfo.img = res.data.data.data.avatar
					_this.userinfo.nickname = res.data.data.data.nickname
					_this.userinfo.phone = res.data.data.data.phone
					_this.userinfo.synopsis = res.data.data.data.synopsis
					// console.log(this.userinfo.img)
					// console.log(this.userinfo.nickname)
					// console.log(this.userinfo.phone)
				},
				fail: (err) => {
					console.log(err)
				}
			});
			this.getmy()
		},
		onNavigationBarButtonTap() {
			if (this.isshow == false) {
				this.isshow = true
			} else {
				this.isshow = false
			}
		},
		methods: {
			//删除此条说说
			deleteitem(msg){
				let that = this
				uni.showModal({
					title: "确定删除此条说说",
					success: function(res) {
						if (res.confirm) {
							let token = uni.getStorageSync("token")
							uni.request({
								url: that.G_base + '/api/user/del_dynamic',
								method: 'POST',
								header: {
									'content-type': 'application/x-www-form-urlencoded',
									'Authori-zation': 'Bearer ' + token
								},
								data: {
									dy_id: msg.dy_id,
								},
								success: res => {
									if (res.data.status == 200) {
										uni.showToast({
											title:'删除成功',
											icon:'none'
										})
										that.getmy();
									}
								}
							})
						}
					},
					fail: function(err) {}
				});
			
			},
			dz(id) {
				console.log(id)
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/lz/dz',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						id: id,
					},
					success: res => {
						if (res.data.status == 200) {
							if (res.data.msg == '点赞成功') {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								this.dzmsg = res.data.msg
								this.getmy()
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								this.dzmsg = res.data.msg
								this.getmy()
							}
						}
					}
				})
			},
			toadd() {
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/user/add_replys',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						pl_id: this.plid,
						hf_title: this.title,
						// hf_uid回复评论的uid,
						bhf_uid: this.bhf_uid
					},
					success: res => {
						console.log(res)
						if(res.data.status == 200){
							this.getpl()
							this.title=''
						}
					}
				})
			},
			topl(id, uid, nickname) {
				// console.log(id)
				// console.log(uid)
				this.plid = id
				this.bhf_uid = uid
				this.placeholder = '回复@' + nickname + '：'
			},
			getpl() {
				let token = uni.getStorageSync("token")
				// console.log(this.dy_id)
				uni.request({
					url: this.G_base + '/api/lz/pllist',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					data: {
						id: this.dy_id
					},
					success: res => {
						this.info = res.data.data
						// console.log(res.data.data[1].phlist[0].hf_title)
					}
				})
			},
			guanbi() {
				this.$refs.wf_status3.close()
				this.hidd = false
				this.istan = false
			},
			openxiaoxi(dy_id) {
				this.$refs.wf_status3.show()
				console.log(dy_id)
				this.dy_id = dy_id
				if (this.istan == false) {
					this.istan = true
					this.getpl()
					this.hidd = true

				} else {
					this.istan = false
					this.hidd = false
					// console.log(this.hidd)
				}

			},
			open() {
				this.$refs.popup.open()
				this.hidd = true
			},
			containerTap() {
				this.listshow = false
			},
			zhankai() {
				this.listshow = true
			},
			getmy() {
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/user/list_dynamic',
					method: "GET",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					success: (res) => {
						console.log(res)
						console.log("用户的信息朋友圈")
						res.data.data.forEach(item => {
							item['newimg'] = item['img'].split(",")
							// console.log(item['newimg'].length)
						})
						console.log(res.data.data)
						this.faxian = res.data.data
					},
				});
			},
			previewImg(logourl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			gochuangjiang() {
				uni.navigateTo({
					url: '/pages/qunyuan/qunyuan'
				})
				this.isshow = false
			},
			saoyisao() {},
			add() {
				uni.navigateTo({
					url: '/pages/add_contact/add_contact'
				})
				this.isshow = false
			},
			help() {
				uni.navigateTo({
					url: '/pages/help/help'
				})
			},
			pinglunshou(flag) {

				this.zhanshi = !this.zhanshi

			},
			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			close() {
				this.$refs.bottprop.close()
				// this.hidd =false
			},
			gofabu() {
				uni.navigateTo({
					url: "../../fabu/fabu"
				})
			},
			tuichu() {
				// this.listshow = !this.listshow
				this.$refs.popup.close()
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/logout',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					success: res => {
						console.log(res)
						if (res.data.status == 200) {
							uni.showToast({
								title: "退出成功"
							})
							uni.clearStorageSync()
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/login/login"
								})
							}, 1000)
						}
					}
				})

			},
			gomycode() {
				uni.navigateTo({
					url: "../mycode/mycode"
				})
			},

			loveclick() {
				this.loveclick = !this.loveclick
			},

			myinfo(msg) {
				console.log(msg)
				uni.navigateTo({
					url: "../../friendinfo/friendinfo?uid=" + msg.account
				})
			},

		},
		onPageScroll() {
			this.$refs.wf_status3.close()
			this.hidd = false
			this.istan = false
		},
		onPullDownRefresh: function() {
			// this.hidd = true
			let token = uni.getStorageSync("token")
			uni.request({
				url: this.G_base + '/api/user',
				method: "GET",
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + token
				},
				success: (res) => {
					console.log(res);
				},
				fail: (err) => {
					console.log(err)
				}
			});
			uni.request({
				url: this.G_base + '/api/userinfo',
				method: "GET",
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + token
				},
				success: (res) => {
					console.log(res);
					this.userinfo.img = res.data.data.data.avatar
					this.userinfo.nickname = res.data.data.data.nickname
					this.userinfo.phone = res.data.data.data.phone

				},
				fail: (err) => {
					console.log(err)
				}
			});
			uni.request({
				url: this.G_base + '/api/user/list_dynamic',
				method: "GET",
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + token
				},
				success: (res) => {
					console.log(res)
					console.log("用户的信息朋友圈")
					res.data.data.forEach(item => {
						item['newimg'] = item['img'].split(",")
						// console.log(item['newimg'].length)
					})
					console.log(res.data.data)
					this.faxian = res.data.data
				},
			});
			uni.stopPullDownRefresh();
		},
		components: {
			LeePopup,
			Lee
		}
	}
</script>

<style>
	.videos {
		z-index: -10;
	}

	.shouqianniu {
		padding-left: 26%;
	}

	.lee-popup {

		background-color: #fdfdfd;
		z-index: 999;
	}

	.uni-video-container {
		z-index: -2;
	}

	.lee-popup {
		z-index: 10;
	}

	scroll-view {
		height: 320px;
	}

	.uni-video-cover {
		position: relative;
		z-index: -1;
	}



	.displayinlin2 {
		display: inline;
	}

	.displayinlin {
		display: inline;

	}

	.info_t {
		display: flex;
		flex-direction: column;
		margin-top: 5px;
	}

	.topimg {
		display: flex;
		align-items: center;
	}

	.imgtop2 {
		display: flex;
		align-items: center;
		margin-left: 20upx;
	}

	.infoimg2 {
		flex: 2;

	}

	.infocontent2 {
		flex: 6;
	}

	.infolove2 {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.twocontent {
		display: flex;


		flex-direction: row;

	}

	.wraper2 {

		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.wraper {
		font-size: 12px;
		margin: 10px 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 9999;
	}

	.infoimg {
		flex: 1;
		margin-left: 20px;

	}

	.pinglvinput {

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.liaotiantext {
		font-size: 12px;
	}

	.infocontent {
		flex: 6;
		display: flex;
		flex-direction: column;

	}

	.infolove {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.infocon {
		margin-left: -50px;

	}

	.infoimg2 {
		font-size: 12px;
		display: flex;
		justify-content: space-around;
	}

	.infoimg2 image {
		width: 20px;
		height: 20px;
		border-radius: 50px;
		margin-left: 50px;
	}

	.twodisplay .test {
		margin-left: 10px;
	}

	.twodisplay {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.righticon {
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		align-items: center;
		margin-right: -20px;
	}

	.righticon2 {

		margin-right: 0px;
	}

	.continfo {
		display: flex;
		flex-direction: column;

		text-align: left;
	}


	.infoimg image {

		width: 30px;
		height: 30px;
		border-radius: 50px;

	}

	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 19px;
	}


	.nav text {
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.exitprop {
		width: 100%;
		height: 75upx;
		margin-top: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list {
		margin-top: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #FFFFFF;
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
	}

	.listcontent {
		width: 100%;
		height: 75upx;
		display: flex;
		align-items: center;
	}

	.info_t {
		display: flex;
		flex-direction: column;
	}

	.imgwrapone {
		z-index: -1;
	}

	.topimg {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 99;
	}

	.imgtop image {
		width: 10px;
		height: 10px;
		margin-right: 20px;
	}

	.twoflex {
		margin-right: 10px;
	}

	.twoflex text:nth-child(1) {
		margin-right: 20px;
	}

	.bottominfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.imgwrap image {
		margin-top: 10px;
		margin-right: 5px;
	}

	.imgwrap {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.imgwrapone image {
		margin-top: 10px;
		margin-right: 5px;
	}

	.wrap image {
		width: 30px;
		height: 30px;
		border-radius: 50px;
	}

	.wrap text {
		position: relative;
		margin-left: 13px;
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		font-family: PingFangSC-regular;
	}

	.wrap {
		display: flex;
		margin: 5px;
	}

	.quan {
		margin-top: 30px;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 10px;
	}

	.bottominfo {
		margin-left: 40px;
	}

	.infoname {
		margin-left: 120px;
		display: flex;
		margin-top: -60px;
	}

	.meinfo image:nth-child(2) {
		position: absolute;
		right: 12px;
		top: 25px;
		width: 22px;
		height: 22px;

	}

	.meinfo {
		position: relative;
	}

	.meinfo image {
		width: 80px;
		height: 80px;
		border-radius: 80px;
		margin-top: -20px;
		margin-left: 26px;
	}

	.top {
		width: 100%;
		height: 200px;
		z-index: -1;
		padding-top: 10px;
	}

	.thispinglun {
		width: 50px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20px;
	}

	/* 弹出评论 */
	.mask {
		width: 100%;
		height: 360px;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		z-index: 99;
		/* transition: 2s linear 1s all; */
	}

	.title {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		margin-bottom: 10upx;
		position: relative;
	}

	.title image {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 0;
	}

	.thisOne {
		display: flex;
		align-items: center;
	}

	.useravatar {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.useravatar2 {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.username {
		font-size: 17px;
		color: #8a8a8a;
	}

	.pinglun {
		font-size: 17px;
	}

	.zan {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.zan image {
		width: 35upx;
		height: 35upx;
	}

	.zan view {
		font-size: 15px;
	}

	.pinglunbox {
		width: 87%;
		margin: 10upx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
